import React, { useEffect, useRef, useState } from 'react';
import Card from '@/components/Card';
import { useTranslation } from 'react-i18next';
import styled from '@emotion/styled';
import AgentService from '@/modules/Agent';

interface VocationalProps {
	classname?: string;
	width?: string;
	height?: string;
	hasHumanflow: boolean;
}

const VocationalContainer = styled.div`
	max-height: ${(props: { hasQtView: boolean, hasHumanflow: boolean }) => (props.hasQtView && props.hasHumanflow ? 'calc(100% - 392px)' : props.hasQtView ? 'calc(100% - 342px)' : props.hasHumanflow ? 'calc(100% - 216px)' : '')};
	height: 100%;
	box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 12%);
	border-radius: 2px;
	background: #ffffff;
`;

const Vocational = (props: VocationalProps) => {
	const { t } = useTranslation();
	const { classname = '', hasHumanflow } = props;
	const classnames = `widget-vocational-container ${classname}`;
	const bizRef = useRef<HTMLDivElement | null>(null); // Specify the type for the ref
	const [cardHeight, setCardHeight] = useState(0);

	useEffect(() => {
		const handleResize = () => {
			if (bizRef.current) {
				console.log('offsetHeight:', bizRef.current.offsetHeight);
				setCardHeight(bizRef.current.offsetHeight - 60);
			}
		};

		const resizeObserver = new ResizeObserver(handleResize);
		if (bizRef.current) {
			resizeObserver.observe(bizRef.current);
		}

		// Initial call to set the height
		handleResize();

		return () => {
			if (bizRef.current) {
				resizeObserver.unobserve(bizRef.current);
			}
		};
	}, []);

	return (
		<VocationalContainer 
			hasQtView={!AgentService.configure.preferenceSettings.qualityTestingResultHidden} 
			hasHumanflow={hasHumanflow} 
			id="biz-opertop-section" 
			ref={bizRef} // Use the ref correctly
		>
			<p className="business-title">{t('business-operation')}</p>
			<Card height={cardHeight}></Card>
		</VocationalContainer>
	);
};

export default Vocational;
